import React, { Component} from 'react';

import TableSelect from 'components/common/TableSelect';

import './index.scss';

export default class TableBody extends Component {

    render () {

        const { fieldData, booksData, onSelectChange, onStatusClick } = this.props;

        return (
            <tbody>
                {
                    booksData && booksData.map((item, index) => {
                        return (
                            <tr key={ index }>
                                <td>
                                    { item.bid }
                                </td>

                                <td>
                                    <img 
                                      className="book-img"
                                      src={ `http://gcimg.mvvm.xyz/${item.imgKey}` } 
                                      alt={ item.bookTitle }
                                    />
                                </td>

                                <td className="book-name">
                                    { item.bookTitle }
                                </td>

                                <td>
                                    <span className={ item.bookPrice === '0' ? 'free' : 'price' }>
                                        { item.bookPrice === '0' ? '免费' : `￥${item.bookPrice}` }
                                    </span>
                                </td>

                                <td>
                                   <TableSelect 
                                     fieldData = { fieldData }
                                     selectIdx = { index }
                                     bid = { item.bid }
                                     defaultValue = { item.fieldTitle }
                                     onSelectChange = { onSelectChange }
                                    />
                                </td>

                                <td>
                                    <button
                                      className={ ['btn', item.status ? 'btn-danger' : 'btn-success'].join(' ') }
                                      onClick={ () => onStatusClick(item.bid, index) }
                                    >
                                       { item.status ? '下架' : '上架' }
                                    </button>
                                </td>
                            </tr>
                        );
                    })
                }
            </tbody>
        );
    }
}